<template>
  <view class="page-view">

    <view class="top-bg">
      <u-sticky>
        <view class="return" @click="goToBack()">
          <u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
        </view>

        工单处理
        <view class="header-wrap">
          设备类型
          <view class="selectName" @click="typeShow=true">{{equTypeValue}}
            <image class="arrow" src="../../static/icon/icon-bottom-arrow.png" mode=""></image>
          </view>
          <view class="item_search">
            <u-search shape="round" v-model="timeStr" bgColor="#f2f7f5" height="53" style="pointer-events: none"
              searchIcon="calendar" searchIconSize="26" placeholder="选择时间" :show-action="false" :disabled="true"
              @click="dateShow = true"></u-search>
            <image v-if="clearsDateShow" class="clearImg" src="@/static/login/clear.png" @click="onClearsDate"></image>
          </view>

        </view>
      </u-sticky>
    </view>
    <view class="posBox">
      <view class="list-wrap" :style="{ height: 'calc(100vh - 298rpx)' }">
		  <view class="nodata" v-if="workList.length==0">
		    <image class="noDataImg" src="@/static/icon/noData.png"></image>
		  </view>
        <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleGetMore">
          <view class="task-item" v-for="(item, index) in workList" :key="index">
            <view class="info-row"> <text>设备类型</text>{{item.equType_dictText}} </view>
            <view class="info-row"> <text>设备名称</text>{{ item.equName }}</view>
            <view class="info-row"> <text>设备编号</text>{{ item.equNo }}</view>
            <view class="info-row"> <text
                style='text-align:center;'>进出口</text>{{ item.drain==1?'进口':item.drain==2?'出口':''}}</view>
            <view class="info-row"> <text>问题类型</text>{{ item.policeType_dictText }}</view>
            <view class="info-row2">
              <view style="color: #989898">问题描述</view>
              <view style="width: 78%;color: #5e5e5e;">{{ item.desc }}</view>
            </view>
            <view class="info-row"><text>报警时间</text>{{ item.reportTime }}</view>
            <view class="btn-item" @click="goTaskDispose(item)">问题处理</view>
          </view>
        </scroll-view>
        <u-picker :show="typeShow" keyName="text" :columns="[equTypeList]" @confirm="bindPickerChange1"
          @cancel="typeShow=false"></u-picker>
        <van-calendar :show="dateShow" ref="calendar" color="rgba(39, 105, 247, 1)" :maxDate="maxDate"
          :minDate="minDate" monthNum="24" rowHeight="106" title="选择时间" type="range" @confirm="dateConfirm"
          @close="dateClose">
        </van-calendar>
      </view>
    </view>
    <u-popup :show="disposeShow" @close="close" @open="open" mode="center" round="10" closeable overlayOpacity='0.2'
      customStyle='margin: 0rpx 40rpx;'>
      <view class="title">问题处理弹窗</view>
      <view class="infoBox">
        <view class="info-row"> <text>设备类型</text>{{item.equType_dictText}} </view>
        <view class="info-row"> <text>设备编号</text>{{ item.equNo }}</view>
        <view class="info-row2">
          <view style="color: #989898">问题描述</view>
          <view style="width: 81%;color: #5e5e5e;">{{ item.desc }}</view>
        </view>
        <view class="info-row3">
          <text style="color: #989898">现场情况</text>
          <u--input border="surround" clearable v-model="xcqk" disabledColor="#ffffff" placeholder="请输入"></u--input>
        </view>
        <view class="info-row3">
          <text style="color: #989898">处理措施</text>
          <u--input v-model="meausre" disabledColor="#ffffff" placeholder="请输入"></u--input>
        </view>
        <view class="info-row"><text>照片</text>
          <u-upload width="200" height="200" :previewFullImage="true" :fileList="tp" name="tp" @afterRead="afterRead"
            @delete="deletePic" multiple :maxCount="6">
          </u-upload>
        </view>
      </view>
      <view class="submitBtn">
        <u-button @click="submit" :loading="loading" class="custom-style" text="提交" color="#428ffc" throttleTime="1000">
        </u-button>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { getDictItemInfo } from '@/api/system.js';
import { getOmPoliceList, addOmPoliceHandle, getOmPoliceType } from '@/api/yunwei.js';
import { commonUploadPic } from '@/api/common.js';
export default {
  filters: {
    filterDate(dateStr) {
      if (dateStr) {
        dateStr = dateStr.replaceAll('-', '/');
        return new Date(dateStr).format('yyyy-MM-dd');
      } else {
        return '';
      }
    },
  },
  data() {
    return {
      item: {},
      xcqk: '',
      meausre: '',
      tp: [],
      timeStr: '',
      disposeShow: false,
      equTypeList: [],
      typeShow: false,
      equTypeValue: '请选择',
      equType: '',
      clearsDateShow: false,
      startTime: '',
      endTime: '',
      dateShow: false,
      maxDate: new Date().valueOf(),
      minDate: new Date('2024-01-01').getTime(),
      policeList: [],
      total: null,
      params: {
        page: 1,
        pageSize: 40,
      },
      workList: [],
      taskList: [],
      policeTypeShow: false,
      woType: '',
      policeTypeList: [], // 设备类型列表-字典值列表
    };
  },
  created() {
    this.getOmPoliceType()
  },
  onShow() {
    this.getOmPoliceList()
  },
  mounted() { },
  methods: {
    goToBack() {
      wx.navigateBack({
        delta: 1
      });
    },
    async getOmPoliceList() {
		const villageId = uni.getStorageSync('villageId')
      const res = await getOmPoliceList({
        ...this.params,
        begin: this.startTime,
        end: this.endTime,
        equType: this.equType,
        isHandle: 1,
		villageId
      })
      if (res.data.data) {
        this.workList = res.data.data.records
        this.total = res.data.data.total
      } else {
        this.workList = []
        this.total = 0
      }


      console.log(res.data);
    },
    goTaskDispose(i) {
      this.item = i
      this.disposeShow = true
    },
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[event.name].length
      lists.map((item) => {
        this[event.name].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this[event.name][fileListLen]
        this[event.name].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    async uploadFilePromise(url) {
      const res = await commonUploadPic(url, 1)
      console.log(res, 'uploadHttp')
      let d = JSON.parse(res.data)
      if (d.code == 200) {
        return d.result
      }
    },
    // 删除图片
    deletePic(event) {
      this.tp.splice(event.index, 1)
    },
    async submit() {
      var bool = this.tp.every((item) => {
        return item.status == 'success'
      })
      if (!bool) {
        uni.showToast({
          title: '图片上传中'
        })
        return
      }
      const res = await addOmPoliceHandle({
        id: this.item.id,
        meausre: this.meausre,
        pic: this.tp.map(item => item.url).join(','),
        situation: this.xcqk,
      })
      console.log(res.data);
      if (res.data.code == 200) {
        uni.showToast({
          title: res.message
        })
        this.disposeShow = false
        this.xcqk = ''
        this.meausre = ''
        this.tp = []
        // rectificationId:
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none'
        })
      }
    },
    dateConfirm(e) {
      this.startTime = new Date(e.detail[0]).format('yyyy-MM-dd')
      this.endTime = new Date(e.detail[e.detail.length - 1]).format('yyyy-MM-dd')
      this.timeStr = this.startTime + '~' + this.endTime
      this.dateShow = false
      this.clearsDateShow = true
      this.params.page = 1
      this.params.pageSize = 40
      this.getOmPoliceList()
    },
    dateClose() {
      this.dateShow = false
    },
    onClearsDate() {
      this.timeStr = ''
      this.startTime = ''
      this.endTime = ''
      this.clearsDateShow = false
    },
    open() {
      // console.log('open');
    },
    close() {
      this.disposeShow = false

      // console.log('close');
    },
    bindPickerChange1: function (e) {
      console.log(e);
      const selectItem = e.value[0];
      this.equTypeValue = selectItem.text;
      this.equType = selectItem.type
      this.typeShow = false
      this.params.page = 1
      this.params.pageSize = 40
      this.getOmPoliceList()
    },
    // 获取报警工单设备类型
    async getOmPoliceType() {
      try {
        const { data } = await getOmPoliceType();
        this.equTypeList = data?.data || [];
        this.equTypeList.unshift({ text: '请选择', type: '' })
      } catch (e) {
        //TODO handle the exception
      }
    },
    handleGetMore() {
      this.params.page++;
      if (this.total && this.taskList.length >= this.total) {
        return;
      }
      this.getOmPoliceList();
    }
  },
};
</script>
<style scoped lang="scss">
.page-view {
  height: 100vh;
  // background: #f8f9fb;
  position: relative;
  overflow: hidden;
}
.posBox {
  position: absolute;
  top: 260rpx;
}
.nodata {
  margin-top: 280rpx;
  margin-left: 139rpx;
  .noDataImg {
    width: 472rpx;
    height: 522rpx;
  }
}
.top-bg {
  width: 100%;
  height: 330rpx;
  background: #2769f7;
  border-radius: 0rpx 0rpx 140rpx 140rpx;
  padding-top: 104rpx;
  text-align: center;
  font-weight: 600;
  font-size: 40rpx;
  color: #ffffff;
  letter-spacing: 4rpx;
  position: relative;
  .return {
    position: absolute;
    left: 32rpx;
    margin-top: 8rpx;
  }
}
.header-wrap {
  // position: relative;
  margin: 32rpx;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: bold;
  font-size: 28rpx;
  letter-spacing: 0rpx;
  .item_search {
    font-weight: 400;
    font-size: 24rpx;
    color: #4a4a4a;
    width: 53%;
    position: relative;
    .clearImg {
      position: absolute;
      width: 25rpx;
      height: 25rpx;
      right: 8rpx;
      bottom: 16rpx;
    }
  }
  .selectName {
    width: 160rpx;
    height: 56rpx;
    padding: 0 10rpx;
    line-height: 56rpx;
    background: #f2f6f7;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #4a4a4a;
    margin: 0 14rpx;
    overflow: hidden;
    .arrow {
      width: 16rpx;
      height: 10rpx;
      vertical-align: middle;
      margin-left: 30rpx;
    }
  }
}
.scroll-Y {
  height: 100%;
}

.task-item {
  // width: 636rpx;
  // height: 556rpx;
  position: relative;
  margin: 16rpx 32rpx;
  background: #ffffff;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  padding: 32rpx 14rpx 116rpx 32rpx;
  font-weight: bold;
  font-size: 28rpx;
}
.info-row2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.info-row3 {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.info-row {
  color: #5e5e5e;
  margin-bottom: 8rpx;
  display: flex;
  text {
    width: 22%;
    color: #989898;
    display: inline-block;
  }
}
.btn-item {
  position: absolute;
  right: 26rpx;
  bottom: 32rpx;
  width: 168rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  background: #3c8aff;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  cursor: pointer;
  font-weight: 400;
  color: #fff;
}
.title {
  text-align: center;
  margin-top: 32rpx;
  font-weight: 800;
  font-size: 32rpx;
  color: #4a4a4a;
}
.infoBox {
  margin: 32rpx 24rpx 0 24rpx;
  font-weight: bold;
  font-size: 24rpx;
  text {
    width: 19%;
  }
}
.submitBtn {
  margin: 132rpx 48rpx 32rpx 48rpx;
}
/deep/ .u-input--radius {
  // width: 324rpx;
  // height: 60rpx;
  background: #f2f6f7;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
}
/deep/ .u-search__content {
  padding: 0 10rpx !important;
}
/deep/.u-icon__icon {
  font-size: 30rpx !important;
}
</style>
